<script setup lang="ts" name="refund-manage">
import type { VxePagerEvents, VxeToolbarPropTypes } from 'vxe-table'
import { activityReservationV1Delete, activityReservationV1PageList } from '@fl/api/city-service'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { formatTime } from '@fl/utils'
import { useDicts } from './hooks/use-dicts'
import { useReservationForm } from './hooks/use-form'
import { useSignupTable } from './hooks/use-table'

const route = useRoute()
const router = useRouter()
const { form, columns, state } = useReservationForm()
const { gridOptions } = useSignupTable()
const { getDictLabel } = useDicts()
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
function getList() {
    gridOptions.loading = true

    const oParams: any = {
        pageNo: tablePage.currentPage,
        pageSize: tablePage.pageSize,
        ...form.value,
    }
    if (route.query?.activityId) {
        oParams.activityId = route.query.activityId
    }
    activityReservationV1PageList(oParams).then((res) => {
        const { records, total } = res
        tablePage.total = total
        gridOptions.data = records
    }).finally(() => {
        gridOptions.loading = false
    })
    console.log('form', form)
}
function deleteItem(id) {
    ElMessageBox.confirm('正在进行删除操作，您确定要继续吗？', { title: '提示', confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
        activityReservationV1Delete(id).then((res) => {
            if (res) {
                ElMessage({
                    message: '已删除！',
                    type: 'success',
                })
                initLoad()
            }
            else {
                ElMessage.error('请求失败，请稍后重试～')
            }
        })
    })
}
getList()

function search() {
    tablePage.currentPage = 1
    getList()
}
function reset() {
    form.value = {
        ...state,
    }
    initLoad()
}
function initLoad() {
    tablePage.currentPage = 1
    tablePage.pageSize = 10
    getList()
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    getList()
}
function toDetail() {
    // router.push({
    //     path: '/city/yun-club-content/content/add',
    //     query: {
    //         orderId: '123',
    //     },
    // })
    router.push({
        name: 'yun-club-activity-signup-add',
    })
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :columns="columns"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <!-- -->

        <vxe-grid v-bind="gridOptions">
            <template #toolbar_buttons>
                <el-button type="primary"
                           @click="toDetail"
                >
                    新建
                </el-button>
            </template>

            <template #createTime="{ row }">
                {{ formatTime(row.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </template>

            <template #status="{ row }">
                {{ getDictLabel('oAfterSaleStatus', row.status) }}
            </template>

            <template #operate="{ row }">
                <vxe-button content="删除"
                            type="text"
                            style="color: #da0004;"
                            @click="deleteItem(row.id)"
                />
            </template>

            <template #pager>
                <vxe-pager :current-page="tablePage.currentPage"
                           :page-size="tablePage.pageSize"
                           :total="tablePage.total"
                           :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                           background
                           @page-change="handlePageChange"
                />
            </template>
        </vxe-grid>
    </ElCard>
</template>

<style lang="less" scoped></style>
